import React, { Component } from 'react'
import {
    Text,
    View,
    Image,
    TouchableOpacity,
    Button,
    StyleSheet,
    InteractionManager
  } from 'react-native';
import NetWork from '../../Core/Network/NetController'
import Url from '../../Core/Network/Url'
import dayjs from 'dayjs'; 
import BasePage from '../../Component/Common/BasePage' 
export class EventItem extends BasePage {
  constructor(props){
    super(props)
    const {item}=this.props;
    this.state={
      isCollected:item.isCollect===0?false:true,
    }
  }
  render() {
    const {item,type}=this.props;
    var cellType=""
    var timestamp=new Date().getTime()/1000;
    var isCollected = this.state.isCollected

    if (type!==3) {
      if(item.matchStatus===1){
        cellType= 
          <View style={{flexDirection:'column', flex:1 ,alignItems:'center' }}>
            <Text style={styles.gameName }>{item.eventShortName}</Text>
            <Text style={styles.tipText}>文字、动画即将开始</Text>
            <Text style={styles.gameStartTime }>{timestampToTime(item.startGameTime)}</Text>
            <TouchableOpacity  style={{width:20, height:20, marginTop:5 }} onPress={()=>this._collectedEventBtn(item) } >
             <Image source={isCollected ?require('../Common/img/saishi_shoucang.png') : require('../Common/img/saishi_weishoucang.png')} >
             </Image>
           </TouchableOpacity>
          </View>
      }else if(item.matchStatus===8){
        cellType= 
          <View style={{flexDirection:'column', flex:1 ,alignItems:'center' }}>
            <View style={{flexDirection:'row' ,height:30, justifyContent:'center', alignItems:'center'}}>
              <Text style={{height:20 ,marginTop:10,}}>{item.eventShortName}</Text>
              <Text style={{ height:20, marginTop:10, marginLeft:5,}}>{timestampToTime(item.startGameTime)}</Text>
            </View>
            <Text style={{marginTop:5, }} >{`${item.homeTeamScore}  —  ${item.visitTeamScore}`}</Text>
            <TouchableOpacity style={{width:20, height:20, marginTop:5 }} onPress={()=>this._collectedEventBtn(item) } >
              <Image source={isCollected ? require('../Common/img/saishi_shoucang.png') : require('../Common/img/saishi_weishoucang.png')} >
              </Image>
            </TouchableOpacity>
          </View>
      }else{
        cellType= 
          <View style={{flexDirection:'column', flex:1 ,alignItems:'center' }}>
            <View style={{flexDirection:'row' ,height:30, justifyContent:'center'}}>
              <Text style={{marginLeft:5,height:20 ,marginTop:10,}}>{item.eventShortName}</Text>
              <Text style={{marginLeft:5 ,height:20, marginTop:10 }}>{getTimeDifference(item.startGameTime,timestamp)}</Text>
            </View>
            <Text style={styles.startingTipText }>文字、动画直播中</Text>
            <Text style={{marginTop:5, }} >{`${item.homeTeamScore}  —  ${item.visitTeamScore}`}</Text>
            <TouchableOpacity style={{width:20, height:20, marginTop:5 }} onPress={()=>this._collectedEventBtn(item) } >
              <Image source={isCollected ? require('../Common/img/saishi_shoucang.png') : require('../Common/img/saishi_weishoucang.png')} >
              </Image>
            </TouchableOpacity>
          </View>
      }
    } else {
      cellType= 
        <View style={{flexDirection:'column', flex:1 ,alignItems:'center' }}>
          <View style={{flexDirection:'row' ,height:30, justifyContent:'center'}}>
            <Text style={{marginLeft:5,height:20 ,marginTop:10,}}>{item.eventShortName}</Text>
            <Text style={{marginLeft:5 ,height:20, marginTop:10 }}>{timestampToTime(item.startGameTime)}</Text>
          </View>
          <Text style={{marginTop:10, height:20, }} >{`${item.homeTeamScore}  —  ${item.visitTeamScore}`}</Text>
          <TouchableOpacity style={{width:20, height:20, marginTop:10 }} onPress={()=>this._collectedEventBtn(item) } >
            <Image source={isCollected ? require('../Common/img/saishi_shoucang.png') : require('../Common/img/saishi_weishoucang.png')} >
            </Image>
          </TouchableOpacity>
        </View>
    }
    return (
        <TouchableOpacity onPress={()=>{
          this.props.onPress()
          
        }}
        style={{ flexDirection:'row',marginTop:10, height:110, width:'100%', backgroundColor:'white',}}>
        <View style={{ flexDirection:'column', marginLeft:20, width:100, alignItems:'center', }}>
          <Image source={{uri:item.homeTeamLogo}} style={styles.leftTeamIcon } />
          <Text style={styles.leftTeamName }>{item.homeTeamName}</Text>
        </View>
        {cellType}
        <View style={{flexDirection:'column', marginRight:20, width:100, alignItems:'center',}}>
          <Image source={{uri:item.visitTeamLogo}} style={styles.leftTeamIcon} />
          <Text style={styles.leftTeamName}>{this.props.item.visitTeamName}</Text>
        </View>
      </TouchableOpacity>
    );
  }
  _collectedEventBtn =(item)=>{
    
    InteractionManager.runAfterInteractions(()=>{
      // console.log(`====${JSON.stringify(item)}===`)
      var param ={userId:'223',optType:item.isCollect===0 ? 1 : 0 ,matchId:item.matchId}
      NetWork.requestMap(this,Url.collectedBallEvent(param),
        (jsonData,message)=>{
          console.log(jsonData)
          this.setState((previousState)=>(
            {
              isCollected:!previousState.isCollected
            }
        ))
        }),
        (error)=>{
          console.log(error)
          alert(error)
        }
     })
  }
}
function getTimeDifference(startTime, endTime){
  let time=endTime-startTime;
  let m=Math.floor(time/60)+':';
  let s=Math.floor(time%60);
  return m+s;
}
function timestampToTime(timestamp) {
  var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
  Y = date.getFullYear() + '-';
  M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
  D = (date.getDate()<10 ? '0'+(date.getDate())+ ' ': date.getDate() + ' ');
  h = (date.getHours()<10 ? '0'+(date.getHours())+ ':' :date.getHours() + ':');
  m = (date.getMinutes()<10 ? '0'+(date.getMinutes()) :date.getMinutes() );
  s = date.getSeconds();

  return M+D+h+m;
}

export default EventItem


const styles=StyleSheet.create({
    leftTeamName: { 
      height:30, 
      marginTop:10,
      fontSize:12,
    },
    leftTeamIcon: { 
      marginTop:5, 
      width:60, 
      height:60 , 
      textAlign:'center'
    },
    gameName: {marginTop:10, 
      justifyContent:'center', 
      width:'100%', 
      height:20, 
      textAlign:'center' 
    },
    tipText: {marginTop:0, 
      justifyContent:'center', 
      width:'100%', 
      height:20, 
      fontSize:10 ,
      textAlign:'center'
    },
    startingTipText: {
      justifyContent:'center', 
      width:'100%', 
      height:20, 
      color:'blue',
      fontSize:10 ,
      textAlign:'center'
    },
    gameStartTime: {marginTop:0, 
      width:'100%', 
      height:20, 
      fontSize:12, 
      textAlign:'center' 
    },
  
  })

